<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>后台管理-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link
      rel="stylesheet"
      href="../lib/layui-v2.5.5/css/layui.css"
      media="all"
    />
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      body {
        background: #009688;
      }

      body:after {
        content: "";
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
      }

      .layui-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .admin-login-background {
        width: 360px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -180px;
        margin-top: -100px;
      }

      .logo-title {
        text-align: center;
        letter-spacing: 2px;
        padding: 14px 0;
      }

      .logo-title h1 {
        color: #009688;
        font-size: 20px;
        font-weight: bold;
      }

      .login-form {
        background-color: #fff;
        border: 1px solid #fff;
        border-radius: 3px;
        padding: 14px 20px;
        box-shadow: 0 0 8px #eeeeee;
      }

      .login-form .layui-form-item {
        position: relative;
      }

      .login-form .layui-form-item label {
        position: absolute;
        left: 1px;
        top: 1px;
        width: 38px;
        line-height: 36px;
        text-align: center;
        color: #d2d2d2;
      }

      .login-form .layui-form-item input {
        padding-left: 36px;
      }

      .captcha {
        width: 60%;
        display: inline-block;
      }

      .captcha-img {
        display: inline-block;
        width: 34%;
        float: right;
      }

      .captcha-img img {
        height: 34px;
        border: 1px solid #e6e6e6;
        height: 36px;
        width: 100%;
      }

      #img {
        width: 25px;
        height: 22px;
        position: absolute;
        right: 6px;
        top: 8px;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div class="layui-container">
      <div class="admin-login-background">
        <div class="layui-form login-form">
          <form class="layui-form" action="post">
            <div class="layui-form-item logo-title">
              <h1 i18n="footer.corporate">电力设备故障诊断与运维云系统</h1>
            </div>
            <div class="layui-form-item">
              <label
                class="layui-icon layui-icon-username"
                for="username"
              ></label>
              <input
                type="text"
                name="username"
                lay-verify="required|account"
                i18n="footer.username"
                placeholder="用户名或者邮箱"
                autocomplete="off"
                class="layui-input"
                value=""
              />
            </div>
            <div class="layui-form-item">
              <label
                class="layui-icon layui-icon-password"
                for="password"
              ></label>
              <input
                type="password"
                name="password"
                lay-verify="required|password"
                i18n="footer.password"
                placeholder="密码"
                autocomplete="off"
                class="layui-input"
                value=""
                id="LAY-user-login-password"
              />
              <img
                id="img"
                onclick="hideShowPsw()"
                src="../images/openEye.png"
              />
            </div>
            <div class="layui-form-item">
              <label
                class="layui-icon layui-icon-vercode"
                for="captcha"
              ></label>
              <input
                type="text"
                name="captcha"
                lay-verify="required|captcha"
                i18n="footer.code"
                placeholder="图形验证码"
                autocomplete="off"
                class="layui-input verification captcha"
                value=""
              />
              <div class="captcha-img" click="refreshVerify()">
                <img id="captchaPic" src="" />
                <!-- <img id="captchaPic" src="../images/captcha.jpg"> -->
              </div>
            </div>
            <div class="layui-form-item">
              <input
                type="checkbox"
                id="if_language"
                name="rememberMe"
                value="true"
                lay-skin="primary"
                i18n="footer.RememberPwd"
                title="记住密码"
              />
              <div style="float: right; margin-top: 10px">
                <button
                  type="button"
                  style="font-size: 0.6rem; color: darkgray"
                  class="layui-btn layui-btn-primary layui-btn-xs language"
                >
                  中文/English
                </button>
              </div>
            </div>

            <div class="layui-form-item">
              <button
                class="layui-btn layui-btn-fluid"
                lay-submit=""
                i18n="footer.into"
                lay-filter="login"
              >
                登 入
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script
      src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"
      charset="utf-8"
    ></script>
    <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script
      src="../lib/jq-module/jquery.particleground.min.js"
      charset="utf-8"
    ></script>
    <script src="../js/dist/i18n.js" charset="utf-8"></script>
    <script>
      /*默认语言*/
      i18n("[i18n]", {
        defaultLang: "cn", // 设置默认语言，
        filePath: "./i18n/",
        filePrefix: "i18n_",
        fileSuffix: "",
        forever: true, // 默认为 true  保存当前语言，设置为 false 后，每次刷新都为cn
        get: true,
        callback: function () {
          // console.log("i18n is ready.");
        },
      });
      /*切换中英文 - 按钮*/
      var cnBtn = document.querySelector(".language");
      cnBtn.addEventListener(
        "click",
        function () {
          if (document.getElementById("if_language").title == "记住密码") {
            i18n("[i18n]", {
              lang: "en", // 变更语言
              filePath: "./i18n/",
              get: true,
            });
          } else {
            i18n("[i18n]", {
              lang: "cn", // 变更语言
              filePath: "./i18n/",
              get: true,
            });
          }
        },
        false
      );

      /**********layui*****************/
      layui.use(["form"], function () {
        var form = layui.form,
          layer = layui.layer;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // 粒子线条背景
        $(document).ready(function () {
          $(".layui-container").particleground({
            dotColor: "#5cbdaa",
            lineColor: "#5cbdaa",
          });
        });

        //    2020-3-24 HF  获取验证码
        var verifyCode =
          "/oms-web/verification-code?t=" + Date.parse(new Date());

        //    2020-3-24 HF 动态添加验证码
        if (verifyCode == null || verifyCode == undefined) {
          layer.msg("验证码获取失败！");
        } else {
          $("#captchaPic").attr("src", verifyCode);
        }
        //    2020-3-24 HF 点击刷新验证码
        $("#captchaPic").click(function () {
          var newDate = Date.parse(new Date());
          $("#captchaPic").attr(
            "src",
            "/oms-web/verification-code?t=" + newDate
          );
        });

        //    2020-3-24 HF 登录操作
        form.on("submit(login)", function (data) {
          console.log(data);
          var logName = data.field.username;
          $.ajax({
            url: "/oms-web/oms-login-authority",
            type: "post",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({
              loginName: data.field.username,
              password: data.field.password,
              verificationCode: data.field.captcha,
            }),
            success: function (data) {
              getPower(data.data);
              //    2020-3-24 HF 判断验证码
              if (data.data == null || data.data == undefined) {
                layer.msg(data.msg);
              } else {
                layer.msg("登录成功", { icon: 1, time: 1000 }, function () {
                  sessionStorage.setItem("newtoken", data.data);
                  sessionStorage.setItem("SaveLogName", logName);
                  if (
                    document.getElementById("if_language").title == "记住密码"
                  ) {
                    window.location = "../index.html";
                  } else {
                    window.location = "../../litongda_2/index.html";
                  }
                });
              }
            },
            error: function () {
              layer.msg("账号或者密码错误！");
            },
          });
          return false;
        });
        // 2020-03-25 HF  删除token 防止浏览器后退登录
        function refresh() {
          window.sessionStorage.removeItem("newtoken");
        }
        refresh();
      });

      var demoImg = document.getElementById("img");
      var PWD = document.getElementById("LAY-user-login-password");
      function hideShowPsw() {
        if (PWD.type == "password") {
          PWD.type = "text";
          demoImg.src = "../images/closeEye.png"; //图片路径（闭眼图片）
        } else {
          PWD.type = "password";
          demoImg.src = "../images/openEye.png"; // 图片路径（睁眼图片）
        }
      }
      /***************************/
      function getPower(token) {
        $.ajax({
          url: "/oms-web/currentuserauthority?token=" + token,
          type: "get",
          dataType: "json",
          contentType: "application/json",
          success: function (data) {
            //    2020-3-24 HF 判断验证码
            if (data.data == null || data.data == undefined) {
              // layer.msg(data.msg)
            } else {
              sessionStorage.setItem("HpowerNumber", JSON.stringify(data.data));
            }
          },
          error: function () {
            layer.msg("保存权限错误！");
          },
        });
      }
    </script>
  </body>
</html>
